<template>
    <view class="page">
        <!-- 搜索栏 -->
        <SearchBar placeholder="请输入设计师"> </SearchBar>
        <div class="nav-list">
            <div class="nav-item">销售量</div>
            <div class="nav-item active">销售量</div>
            <div class="nav-item">销售量</div>
        </div>
        <view class="designer-grid">
            <Designer
                v-for="(product, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
                :key="index"
                :product="product"
            >
            </Designer>
        </view>
    </view>
</template>

<script setup lang="ts">
import SearchBar from '@/components/searchBar/SearchBar.vue';
import Designer from '@/components/designer/Designer.vue';
</script>

<style scoped lang="scss">
.nav-list {
    display: flex;
    justify-content: space-between;
    padding: 0 84rpx;
    background: #fff;
  margin-top: 16rpx 0 0;
    .nav-item {
        padding: 16rpx 24rpx;
        color: #333;
        font-size: 28rpx;
        border-bottom: 4rpx solid transparent;
        &.active {
            color: #ff5a5f;
            border-bottom: 4rpx solid #ff5a5f;
            border-radius: 4rpx;
        }
    }
}
.designer-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16rpx;
    padding: 24rpx 0;
    background: #f3f7f8;
}
</style>
